<!DOCTYPE html>
<html>
	<head>
	    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	    <title>应用对公配置</title>
	    <!-- 所有的 css js 资源 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
		<link rel="stylesheet" href="../../static/sa.css">
		<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
		<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
		<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.js"></script>
		<script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>
		<script src="../../static/sa.js"></script>
		<script src="../../static/kj/upload-util.js"></script>
		<style type="text/css">
			html,body,.vue-box{height: 100%; overflow: hidden;}
			/* .vue-box{padding: 0px;} */
			.c-panel{height: calc(100% - 4em); position: relative;}
			.c-panel .c-label{width: 10em;}
			.c-panel .el-input{width: 500px;}
			.c-panel .el-textarea{width: 500px;}
			.logo-img{
				width: 35px; 
				height: 35px; 
				border-radius: 2px; 
				vertical-align: middle; 
				margin-right: 0.5em;
				cursor: pointer;
			}
			.s-tab{height: 100%; }
			.el-tabs__content{height: calc(100% - 130px); overflow: auto;}
		</style>
	</head>
	<body>
		<div class="vue-box" style="display: none;" :style="'display: block;'">
			<div class="c-panel" v-if="m != null">
				<!-- tab卡片 -->
				<el-tabs class="s-tab" v-model="activeTab">
					<!-- ---------------------------------- 系统参数 ---------------------------------- -->
				    <el-tab-pane label="系统参数" name="tab1">
						<div class="c-item br">
							<label class="c-label">系统logo：</label>
							<img :src="m.logoUrl" class="logo-img" v-if="sa.isNull(m.logoUrl) == false" @click="sa.showImage(m.logoUrl, '400px', '400px')">
							<el-link type="primary" @click="sa.uploadImage(src => {m.logoUrl = src; sa.ok2('上传成功');})">选择上传</el-link>
						</div>
						<div class="c-item br">
							<label class="c-label">系统名称：</label>
							<el-input v-model="m.appName"></el-input>
						</div>
						<div class="c-item br">
							<label class="c-label">版本编号：</label>
							<el-input v-model="m.appVersionNo"></el-input>
						</div>
						<div class="c-item br">
							<label class="c-label">更新描述：</label>
							<el-input v-model="m.appVersionLog"></el-input>
						</div>
					</el-tab-pane>
					
					<!-- ---------------------------------- 其它配置 ---------------------------------- -->
					<el-tab-pane label="其它配置" name="tab2">
						<br>
						<span>其它配置</span>
					</el-tab-pane>
					
				</el-tabs>
				
				<!-- 确定按钮 -->
				<div style="position: absolute; bottom: 0px; width: calc(100% - 3em); line-height: 80px; background-color: #FFF;">
					<hr style="height: 2px;">
					<div class="c-item">
						<label class="c-label"></label>
						<el-button type="primary" icon="el-icon-check" @click="ok">保存修改</el-button>
						<el-button type="primary" icon="el-icon-refresh-right" @click="f5">重置</el-button>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			// 创建一个默认的配置对象
			function create_m() {
				return {
					logoUrl: '',	// 系统logo地址 
					appName: 'sa-plus快速开发框架'	,// 系统名称
					appVersionNo: 'v1.0.0',	// 系统版本
					appVersionLog: '更新于2099-10-1',	// 更新日志 
				}
			}
		</script>
        <script>
			var app = new Vue({
				el: '.vue-box',
				data: {
					sa: sa, 	// 超级对象
					m: null,		// 
					activeTab: 'tab1',  // 当前显示的tab
					textareaCfg: { minRows: 3, maxRows: 14} // 文本域的默认配置
				},
				methods: {
					// 初始化配置
					init: function(str) {
						// 获取 
						var cfg = sa.JSONParse(str, {});	// 用户配置
						var default_cfg = create_m();		// 默认配置
						// 遍历 
						for(var key in default_cfg) {
							if(cfg[key] !== undefined && cfg[key] !== null) {
								default_cfg[key] = cfg[key];
							}
						}
						// 赋值
						this.m = default_cfg;
					},
					// 刷新
					f5: function(){
						sa.ajax('/SpCfg/getCfg', {cfgName: 'app_cfg'}, function(res){
							this.init(res.data);
						}.bind(this));
					},
					// 提交 
					ok: function(){
						sa.ajax('/SpCfg/updateCfg', {cfgName: 'app_cfg', cfgValue: JSON.stringify(this.m)}, function(res){
							sa.ok2('保存成功');
						}.bind(this));
					},
				},
				created: function(){
					this.f5(); 
				}
			})
		</script>
	</body>
</html>